<template>
  <div class="dashboard-editor-container">
        <div class="container-left">
          <el-row style="background:#fff;margin-bottom:32px;">
              <div class="chart-wrapper wrapper-top">
                  <div class="wrapper-left" style="position: relative;">
                    <span class="title">BMI指数</span>
                    <span class="bmi-text">BMI{{evaluationResult.checkBmi}}</span>
                    <div class="infor" style="position: relative;">
                      <div ref="echartsdata02" style="width: 100%; height: 260px;"></div>
                      </div>
                  </div>
                  <div class="wrapper-right">
                    <span class="title">生长情况</span>
                    <div class="grow-status">
                      <div class="height-status">
                        <span class="status-text">身高</span>
                        <div class="status-text">
                          <span class="status-num">{{heightWeightInfo.height.lastMonth}}</span>
                          <p>上月</p>
                        </div>
                        <div class="status-text">
                          <span style="font-size:32px;font-weight:600;color:#333333;" :class="{ 'green-class': heightWeightInfo.height.lastMonth<heightWeightInfo.height.curMonth, 'red-class':heightWeightInfo.height.lastMonth>heightWeightInfo.height.curMonth }">{{heightWeightInfo.height.curMonth}}</span>
                          <p>本月</p>
                        </div>
                        <div><img :src="heightWeightInfo.height.lastMonth<heightWeightInfo.height.curMonth?iconStatus[0]:iconStatus[1]" alt=""></div>
                      </div>
                      <div class="weight-status">
                         <span class="status-text">体重</span>
                         <div class="status-text">
                          <span class="status-num">{{heightWeightInfo.weight.lastMonth}}</span>
                          <p>上月</p>
                        </div>
                        <div class="status-text">
                          <span style="font-size:32px;font-weight:600;color:#333333;" :class="{ 'green-class': heightWeightInfo.weight.lastMonth<heightWeightInfo.weight.curMonth, 'red-class':heightWeightInfo.weight.lastMonth>heightWeightInfo.weight.curMonth }">{{heightWeightInfo.weight.curMonth}}</span>
                          <p>本月</p>
                        </div>
                        <div><img :src="heightWeightInfo.weight.lastMonth<heightWeightInfo.weight.curMonth?iconStatus[0]:iconStatus[1]" alt=""></div>
                      </div>
                    </div>
                  </div>
              </div>
          </el-row>
          <el-row :gutter="32">
            <el-col :xs="24" :sm="24" :lg="12">
              <div class="chart-wrapper">
                <div slot="header" class="clearfix">
                <span class="title">运动</span>
                <div class="inforbottom">
                  <div class="echartleft">
                    <div ref="echarts" style="height:320px;display:flex;justify-content: center;"></div>
                  </div>
                </div>
              </div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="12">
              <div class="chart-wrapper">
                <div slot="header" class="clearfix">
                <span class="title">饮水</span>
                  <div class="inforbottom">
                    <div class="echartleft">
                      <div ref="echarts03" style="height:320px;display:flex;justify-content: center;"></div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="32">
            <el-col :xs="24" :sm="24" :lg="12">
              <div class="chart-wrapper">
                <div slot="header" class="clearfix">
                <span class="title">健康</span>
                <div ref="echarts04" style="height: 320px;display:flex;justify-content: center;"></div>
              </div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="12">
              <div class="chart-wrapper">
                <div slot="header" class="clearfix">
                <span class="title">睡眠</span>
                <div ref="echarts05" style="width:100%;height:320px;display:flex;justify-content: center;"></div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="container-right">
            <div class="right-top-calendar">
              <span class="title">个人信息</span>
              <div class="person">
                <div class="person-header">
                <div class="header-img">
                  <img :src="personInfo.avatar" alt="">
                </div>
                <p style="text-align:center">{{personInfo.stuName}}</p>
                </div>
                <div class="person-message">
                  <p><span style="color:#999999">姓别：</span>
                  <span style="color:#333333;margin-right:40px">{{personInfo.sex}}</span>
                  <span style="color:#999999;">年龄：</span>
                  <span style="color:#333333">{{personInfo.age}}岁</span>
                  </p>
                </div>
              </div>
              <span class="title">月出勤</span>
              <div class="monthly-duty-list">
                <div>
                  <span class="monthly-num">{{attendanceInfo.standardDay}}</span>
                  <span>应到</span>
                </div>
                <div>
                  <span class="monthly-num">{{attendanceInfo.actualDays}}</span>
                  <span>实到</span>
                </div>
                <div>
                  <span class="monthly-num abnormal">{{attendanceInfo.abnormalDays}}</span>
                  <span>异常</span>
                </div>
              </div>

            </div>
            <div class="right-bott-quick-entry">
              <div class="quick-entry-title">
                <span class="title">兴趣</span>
                <div ref="echarts06" style="height:300px;display:flex;justify-content: center;"></div>
              </div>
            </div>
            <div class="teacherinfo">
              <span>教师寄语</span>
              <el-input placeholder="请输入教师寄语" type="textarea"></el-input>
              <el-button type="primary" size="mini">提交</el-button>
            </div>
        </div>
  </div>
</template>

<script>
// import LineChart from '../components/Chart/LineChart.vue'
import { getChart} from "@/api/sys/chart";
// import PanelGroup from './dashboard/PanelGroup'
import PieChart from '@/components/Chart/PieChart.vue'
// import BarChart from '@/components/Charts/BarChart.vue'
import TableChart from '@/components/Charts/TableChart.vue'
import * as echarts from 'echarts'

export default {
  name: 'Index',
  components: {
    // PanelGroup,
    TableChart,
    PieChart,
    // BarChart,
    // LineChart,
  },
  data() {
    return {
      role: 'teacher',
      iconStatus:[require('@/assets/image/top-green.png'),require('@/assets/image/down-red.png')],
      echarts02: null,
      echarts: null,
      echarts03:null,
      echarts04: null,
      echarts05:null,
      echarts06:null,
      evaluationResult:{},
      heightWeightInfo:{},
      sportMonth:[],
      sportK:[],
      waterY:[],
      waterX:[],
      temperatureInfo:{},//健康
      sleepInfo:{},//睡眠
      personInfo:{},//个人信息
      interestInfo:[],//兴趣
      attendanceInfo:{}//月出勤
    }
  },
  created() {
    this.evaluationResult = this.$route.query.result.evaluationResult
    this.heightWeightInfo = this.$route.query.result.heightWeightInfo
    let sportInfo = this.$route.query.result.sportInfo
    this.sportMonth = Object.keys(sportInfo)
    this.sportK = Object.values(sportInfo)
    let waterInfo = this.$route.query.result.waterInfo.details
    this.waterX = Object.keys(waterInfo)
    this.waterY = Object.values(waterInfo)
    let temperatureInfo = this.$route.query.result.temperatureInfo
    this.temperatureInfo.healthX = Object.keys(temperatureInfo)
    this.temperatureInfo.healthY = Object.values(temperatureInfo)
    let sleepInfo = this.$route.query.result.sleepInfo.details
    this.sleepInfo.sleepX = Object.keys(sleepInfo)
    this.sleepInfo.sleepY = Object.values(sleepInfo)
    this.personInfo.age = this.$route.query.result.age
    this.personInfo.avatar = this.$route.query.result.avatar
    this.personInfo.stuName = this.$route.query.result.stuName
    this.personInfo.year = this.$route.query.result.year
    this.personInfo.sex = this.$route.query.result.sex
    this.personInfo.schoolCode = this.$route.query.result.schoolCode
    this.personInfo.month = this.$route.query.result.month
    this.personInfo.classId = this.$route.query.result.classId
    this.personInfo.id = this.$route.query.result.id
    this.personInfo.stuId = this.$route.query.result.stuId
    this.attendanceInfo = this.$route.query.result.attendanceInfo
    this.interestInfo = this.$route.query.result.interestInfo
    this.interestInfo = this.interestInfo.map(item=>{
      return {
            name: item.name,
            value: item.hour,
          }
    })
    console.log('this.heightWeightInfo',this.$route.query.result);
  },
  mounted(){
    this.echarts = echarts.init(this.$refs.echarts);
    this.echarts02 = echarts.init(this.$refs.echartsdata02);
    this.echarts03 = echarts.init(this.$refs.echarts03)
    this.echarts04 = echarts.init(this.$refs.echarts04);
    this.echarts05 = echarts.init(this.$refs.echarts05);
    this.echarts06 = echarts.init(this.$refs.echarts06)
    this.echartsdata2(this.evaluationResult)
    this.echartsdata()
    this.echartsdata03()
    this.echartsdata04()
    this.echartsdata05()
    this.echartsdata06()
  },
  methods: {
    echartsdata2(val) {
      this.echarts02.setOption({
        tooltip: {
          trigger: 'item',
          show: false
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['80%', '160%'],
            center: ['50%', '90%'],
            label: {
              position: 'inner',
              fontSize: 14,
            },
            selectModel: false,
            startAngle: 180,
            itemStyle: {
              borderRadius: 5,
              borderColor: '#fff',
              borderWidth: 5
            },
            data: [
              {
                value: 300,
                name: '下',
                itemStyle: {
                  color: val.bmiEvaluate === '下' ? '#FF6B71' : '#ccc'
                },
              },
              {
                value: 300, name: '中下',
                itemStyle: {
                  color: val.bmiEvaluate === '中下' ? '#FF6B71' : '#ccc'
                },
              },
              {
                value: 300, name: '中',
                itemStyle: {
                  color: val.bmiEvaluate === '中' ? '#FF6B71' : '#ccc'
                },
              },
              {
                value: 300, name: '中上',
                itemStyle: {
                  color: val.bmiEvaluate === '中上' ? '#FF6B71' : '#ccc'
                },
              },
              {
                value: 300, name: '上',
                itemStyle: {
                  color: val.bmiEvaluate === '上' ? '#FF6B71' : '#ccc'
                },
              },
              {
                // make an record to fill the bottom 50%
                value: 300 + 300 + 300 + 300 + 300,
                itemStyle: {
                  // stop the chart from rendering this piece
                  color: 'none',
                  decal: {
                    symbol: 'none'
                  }
                },
                label: {
                  show: false
                }
              }
            ],
            // radius: ["50%", "130%"] // 这个属性修改圆环宽度
          }
        ]
      });
    },
    echartsdata() {
      this.echarts.setOption({
        color: ['#66DAC3'],
         tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          name: '天',
          data: this.sportMonth
        },
        yAxis: {
          name: '卡路里(cal)',
          type: 'value',
        },
        series: [
          {
            name: '天',
            data: this.sportK,
            type: 'line',
            smooth: true,
            showSymbol: false,
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                      offset: 0,
                      color: "rgba(24,255,193,0.12)" // 0% 处的颜色
                    }, {
                      offset: 0.7,
                      color: "rgba(255,255,253,0)" // 100% 处的颜色
                    }],
                      globalCoord: false // 缺省为 false
                    }
                  }
            },
            itemStyle: {
              lineStyle: {
                color: '#66DAC3'// 折线颜色设置为0，即只显示点，不显示折线
              }
            }
          },
        ]
      })
    },
    echartsdata03() {
      this.echarts03.setOption({
        tooltip: {
          trigger: 'axis',
        },
        color: ['#18AEFF'],
        xAxis: {
          type: 'category',
          name: '天',
          data: this.waterX
        },
        yAxis: {
          name: 'L',
          type: 'value',
        },
        series: [
          {
            name: '天',
            data: this.waterY,
            type: 'line',
            smooth: true,
            showSymbol: false,
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                      offset: 0,
                      color: "rgba(24,174,255,0.12)" // 0% 处的颜色
                    }, {
                      offset: 0.7,
                      color: "rgba(24,174,255,0)" // 100% 处的颜色
                    }],
                      globalCoord: false // 缺省为 false
                    }
                  }
            },
            itemStyle: {
              lineStyle: {
                color: '#66DAC3'// 折线颜色设置为0，即只显示点，不显示折线
              }
            }
          },
        ]
      })
    },
    echartsdata04() {
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.temperatureInfo.healthX
        },
        yAxis: {
          type: 'value',
          name: '℃',
        },
        series: [
          {
            name: '',
            data: this.temperatureInfo.healthY,
            type: 'bar',
            barWidth:'50%',
            itemStyle:{
              color:'#4991FF',
            },
            markLine: {
              symbol: ["none", "none"], //去掉箭头
                lineStyle: {
                  normal: {
                    type: "dashed",
                    color: "#FF4650" //基准线颜色
                  }
                },
                data: [
                  {
                    name: "基准线名称",
                    yAxis: 37 // 基准线数据
                  }
                ],
                label: {
                  show: true,
                  color: "#FF4650" // 基准线文字颜色
                }
            }
          }
        ]
      };
      this.echarts04.setOption(option)

    },
    echartsdata05() {
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.sleepInfo.sleepX,
        },
        yAxis: {
          type: 'value',
          name: '小时',
        },
        series: [
          {
            name: '',
            data: this.sleepInfo.sleepY,
            type: 'bar',
            barWidth:'50%',
            selectedMode: 'single',
            itemStyle:{
              color:'#4991FF',
            },
            markLine: {
              symbol: ["none", "none"], //去掉箭头
                lineStyle: {
                  normal: {
                    type: "dashed",
                    color: "#FF4650" //基准线颜色
                  }
                },
                data: [
                  {
                    name: "基准线名称",
                    yAxis: 37 // 基准线数据
                  }
                ],
                label: {
                  show: true,
                  color: "#FF4650" // 基准线文字颜色
                }
            }
          }
        ]
      };
      this.echarts05.setOption(option)

    },
    echartsdata06() {
      let option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            right: '0%',
            top: '0%',
            orient: 'vertical',
          },
          series: [
            {
              type: 'pie',
              radius: ['40%', '60%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2,
                normal: {
                  show:true,
                  formatter:'value',
                  position:'inner',
                  color: function (colors) {
                    var colorList = [
                                '#4991FF',
                                '#FF6B71',
                                '#00DBA2',
                                '#FFBA00',
                                '#f9c956',
                                '#3BA272'
                              ];
                    return colorList[colors.dataIndex];
                  }
                },
              },
              label: {
                show: true,
                position: 'inner',
                formatter: '{c}'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.interestInfo
            }
          ]
        };
      this.echarts06.setOption(option)

    },
  }
}
</script>

<style lang="scss" scoped>
.infor{
  display: flex;
  justify-content: center;
}
.bmi-text{
      position: absolute;
      transform: translate(-50%);
      left: 50%;
      top: 80%;
      font-size: #333333;
}
.green-class{
  color: #66DAC3;
}
.red-class{
  color: #FF6B71;
}
.noticeClass1{
  background: #E8F3FF;
  color: #3A72FF;
}
.noticeClass2{
  background: #FFE8E8;
  color: #F94F4F;
}
.noticeClass3{
  background: #E8FFFB;
  color: #16C9C8;
}
.noticeClass4{
  background: #FFF3E8;
  color: #F9844F;
}
.dashboard-editor-container {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .title{
    font-size: 16px;
    font-weight: 700;
  }
  .chart-wrapper {
    box-sizing: border-box;
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
    // height: 240px;
  }
  .wrapper-top{
    display: flex;
    .wrapper-left,.wrapper-right{
      flex: 1;
    }
    .wrapper-right{
      .grow-status{
        display: flex;
        flex-direction:column;
        align-items: center;
        .status-text{
          margin-right: 50px;
        }
        .status-num{
          color:#333333;
          font-weight:600;
          font-size:32px;
        }
        .height-status{
          display: flex;
          align-items: center;
          border-bottom: 1px solid rgba(0,0,0,0.12);
          padding-bottom: 10px;
        }
        .weight-status{
          display: flex;
          align-items: center;
          padding-top: 10px;
        }
      }
    }
  }
  .el-row{
    .my-app{
      height: 160px;
      .quick-entry-main{
        display: flex;
        flex-wrap: wrap;
        .main-item{
          margin: 28px;
          font-size: 12px;
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
        }
        img{
          width: 56px;
          height: 56px;
        }
      }
    }
  }

  .container-left{
    width: 80%;
    margin-right: 20px;
  }
  .container-right{
    width: 20%;
    // width: 280px;
    .right-top-calendar{
        background-color: #fff;
        padding: 20px 0 20px 20px;
        .person{
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 20px 0 77px 0;
          .person-header{
            .header-img{
               width: 80px;
                height: 80px;
                border-radius: 50%;
            }
            img{
             width: 100%;
             height: 100%;
             border-radius: 50%;
            }
          }
        }
        .monthly-duty-list{
          margin: 24px 0 40px 0;
          display: flex;
          justify-content: space-around;
          div{
            display: flex;
            align-items: center;
            flex-direction: column;
          }
          span {
            color: #999999;
          }
          .monthly-num{
            font-size: 32px;
            font-family: FFDINPro-Medium, FFDINPro;
            font-weight: 600;
            color: #333333;
          }
          .abnormal{
            color: #FF656C;
          }
        }
      }
    .right-bott-quick-entry{
      padding: 20px;
      width: 100%;
      height: 350px;
      margin-top: 20px;
      background-color: #fff;
      .quick-entry-title{
        font-size: 16px;
        margin-bottom: 24px;
        .see-more{
          color: #0471EF;
          cursor: pointer;
        }
      }
    }
    .teacherinfo{
      background: #fff;
      margin-top: 20px;
      padding: 20px;
      height: 220px;
      span{
        display: inline-block;
        font-weight: 600;
        margin-bottom: 20px;
      }
      .el-button{
        margin-top: 50px;
        float: right;
      }
    }
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
